<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=WAR, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="dpm.css">
</head>
<style>

</style>

<body>
    <div class="warp">
        <div class="header">
            <div class="head">
                <img class="logo" src="logo.png" alt="">
                <ul class="nav">
                    <li><a href="">首页</a></li>
                    <span class="daolan-show">
                        <li><a href="">导览</a></li>
                        <div id="daolan" class="hide">
                            <ul>
                                <li><a href="">开放时间</a></li>
                                <li><a href="">票劵服务</a></li>
                                <li><a href="">交通路线</a></li>
                                <li><a href="">游览须知</a></li>
                                <li><a href="">全景故宫</a></li>
                            </ul>
                        </div>
                    </span>
                    <span class="zhanlan-show">
                        <li><a href="">展览</a></li>
                        <div class="hide" id="zhanlan">
                            <ul>
                                <li><a href="">近期展览</a></li>
                                <li><a href="">专馆</a></li>
                                <li><a href="">原状陈列</a></li>
                                <li><a href="">赴外展览</a></li>
                            </ul>
                        </div>
                    </span>
                    <span class="jiaoyu-show">
                        <li><a href="">教育</a></li>
                        <div class="hide" id="jiaoyu">
                            <ul>
                                <li><a href="">教育新闻</a></li>
                                <li><a href="">故宫博物院教育中心</a></li>
                                <li><a href="">国际博协培育中心</a></li>
                                <li><a href="">故宫志愿者</a></li>
                            </ul>
                        </div>
                    </span>
                    <span class="tansuo-show">
                        <li><a href="">探索</a></li>
                        <div class="hide" id="tansuo">
                            <ul>
                                <li><a href="">建筑</a></li>
                                <li><a href="">藏品</a></li>
                                <li><a href="">古籍</a></li>
                                <li><a href="">宫廷历史</a></li>
                                <li><a href="">文物医院</a></li>
                                <li><a href="">文化专题</a></li>
                                <li><a href="">文画记</a></li>
                                <li><a href="">数字多宝阁</a></li>
                                <li><a href="">数字文物库</a></li>
                            </ul>
                        </div>
                    </span>
                    <span class="xueshu-show">
                        <li><a href="">学术</a></li>
                        <div class="hide" id="xueshu">
                            <ul>
                                <li><a href="">学术资讯</a></li>
                                <li><a href="">专家名录</a></li>
                                <li><a href="">故宫研究院</a></li>
                                <li><a href="">故宫学院</a></li>
                                <li><a href="">其他学术机构</a></li>
                                <li><a href="">故宫博物院院刊</a></li>
                            </ul>
                        </div>
                    </span>
                    <span class="wenchuang-show">
                        <li><a href="">文创</a></li>
                        <div class="hide" id="wenchuang">
                            <ul>
                                <li><a href="">故宫出版</a></li>
                                <li><a href="">文创产品</a></li>
                                <li><a href="">故宫壁纸</a></li>
                                <li><a href="">故宫APP</a></li>
                                <li><a href="">故宫游戏</a></li>
                            </ul>
                        </div>
                    </span>
                    <span class="guanyu-show">
                        <li><a href="">关于</a></li>
                        <div class="hide" id="guanyu">
                            <ul>
                                <li><a href="">总说</a></li>
                                <li><a href="">领导</a></li>
                                <li><a href="">资讯</a></li>
                                <li><a href="">院史编年</a></li>
                                <li><a href="">景仁榜</a></li>
                                <li><a href="">机构设置</a></li>
                            </ul>
                        </div>
                    </span>

                </ul>
                <div class=icon>
                    <img class="image" src="icon1.png" alt="">
                </div>
                <div class="i"></div>
                <div class=icon>
                    <img class="image" src="icon2.png" alt="">
                </div>
                <div class="i"></div>
                <div class=icon>
                    <img class="image" src="icon3.png" alt="">
                </div>
                <div class="i"></div>
                <a class="menu">
                    <img src="icon4.png" alt="">
                </a>
            </div>

        </div>
    </div>
    </div>
</body>

</html>